<template>
  <div class="sindex">
      <div class="swiperPannel">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><router-link to="./forum"><img src="@/assets/images/scientific/pic-banner5.png" alt=""></router-link></van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    <p>技术交流</p>
    <ul >
        <li @click="pannelShow=true"><img src="@/assets/images/scientific/headImg.png" alt=""><span>技术交流</span></li>
        <li><img src="@/assets/images/scientific/headImg.png" alt=""><span>课程合作</span></li>
    </ul>
    <van-popup v-model="pannelShow">
      <ul class="forums">
        <li @click="$router.push('./forum')"><img src="@/assets/images/scientific/headImg.png" alt=""><span>案例交流</span></li>
        <li @click="$router.push('./imageForum')"><img src="@/assets/images/scientific/headImg.png" alt=""><span>AI影像交流</span></li>
        <li @click="$router.push('./biologicalForum')"><img src="@/assets/images/scientific/headImg.png" alt=""><span>AI生命组学交流</span></li>
        <li @click="$router.push('./sofewareForum')"><img src="@/assets/images/scientific/headImg.png" alt=""><span>AI软件与架构交流</span></li>
      </ul>
    </van-popup>
  </div>
</template>

<script>

import { Swipe, SwipeItem } from 'vant';
import { Popup } from 'vant';

import { mapGetters } from "vuex";
import { getStorage } from "@/utils/auth";

export default {
  name: "sindex",
   components: {
  
  },
  data() {
    return {
      active: 0,
      pannelShow:false,
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {

  },
  methods: {
    tabChange(i) {
      this.$store.commit("list/SET_BACK_STATUS", null);
    },
  },
  created() {
    // console.log(JSON.parse(this.userData),11)
    let lang = getStorage("lang");
    this.$i18n.locale = lang ? lang : "cn";
  },
  mounted() {

  },
  destroyed() {

  },
};
</script>
<style lang='scss' scoped>
.swiperPannel{
    background: #fff;
    padding: 15px .15rem;
  
}
  .my-swipe .van-swipe-item {
    color: #000;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
  .swiperPannel img{
      display: block;
      width: 100%;
  }
  .sindex{
     &> p{
         padding: 20px;
         text-align: left;
         color: #333;
         font-weight: 500;
         font-size: 17px;
     }
     &>ul{
         display: flex;
         flex-wrap: wrap;
        
         padding-left: .5rem;
         li{
             
             
             margin-right: .5rem;
             
             img{
                 display: block;
             }
             span{
                 display: block;
             }
         }
     }
  }
  .forums{
    display: flex;
    flex-wrap: wrap;
    padding: 10px ;
    padding-top: 20px;
    li{
      width: 50%;
      text-align: center;
      margin-bottom: 20px ;
      img{
        display: block;
        margin:  0 auto;
        margin-bottom: 10px;
      }
    }
  }
/deep/.van-popup--center{
  width: 80%;
  border-radius: 5px;
}

</style>